{% extends "scm/base.html" %}

{% block content %}
<div class="container-fluid tender-page">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
            <h3 class="mb-1">Tender / Vendor Bidding / Award</h3>
            <div class="text-muted">Step 2 — Tender Header</div>
        </div>
        <a href="{% url 'tender_list' %}" class="btn btn-secondary">Tender Register</a>
    </div>

    {% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
    {% endif %}

    <form method="post" id="tenderForm">
        {% csrf_token %}

        <section class="tender-panel mb-4">
            <div class="panel-heading">1. Tender Header</div>
            <div class="panel-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label" for="tender_no">Tender No.</label>
                        <input class="form-control" id="tender_no" value="Generated when saved" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="tender_date">Tender Date</label>
                        <input class="form-control" id="tender_date" value="{{ tender_date|date:'d-m-Y' }}" readonly>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="pr_id">PR No. *</label>
                        <select class="form-select" id="pr_id" name="pr_id" required>
                            <option value="">Select approved PR...</option>
                            {% for pr in approved_prs %}
                            <option value="{{ pr.id }}"
                                data-title="{{ pr.pr_title|escape }}"
                                data-department="{{ pr.department|escape }}"
                                data-requester="{{ pr.requester|escape }}">
                                {{ pr.pr_no }} — {{ pr.pr_title }}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">Only PRs with status APPROVED are listed.</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="pr_title">Tender / PR Title</label>
                        <input class="form-control" id="pr_title" value="" placeholder="Auto-filled from selected PR" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="department">Department</label>
                        <input class="form-control" id="department" value="" placeholder="Auto-filled from PR" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="requester">Requester</label>
                        <input class="form-control" id="requester" value="" placeholder="Auto-filled from PR" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="initiated_by">SCM User</label>
                        <input class="form-control" id="initiated_by" value="{{ current_scm_user }}" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="status">Status</label>
                        <input class="form-control" id="status" value="DRAFT" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="tender_remarks">Tender Remarks</label>
                        <textarea class="form-control" id="tender_remarks" name="tender_remarks" rows="2"
                                  placeholder="Optional notes"></textarea>
                    </div>
                </div>
            </div>
        </section>

        <section class="tender-panel mb-4">
            <div class="panel-heading">2. Vendor Bidding</div>
            <div class="panel-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                    <div class="text-muted">Vendor quotations will be enabled after the Tender Header is saved.</div>
                    <button class="btn btn-secondary" type="button" disabled>+ Add Vendor Quotation</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered mb-0">
                        <thead><tr><th>No.</th><th>Vendor</th><th>Quotation No.</th><th>Currency</th>
                        <th class="text-end">Total Quotation</th><th>Technical</th><th>Commercial</th><th>Status</th></tr></thead>
                        <tbody><tr><td colspan="8" class="text-center text-muted py-4">No vendor quotations recorded.</td></tr></tbody>
                    </table>
                </div>
            </div>
        </section>

        <section class="tender-panel mb-4">
            <div class="panel-heading">3. Award Recommendation &amp; Approval</div>
            <div class="panel-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Recommended Vendor</label>
                        <input class="form-control" value="" placeholder="Available after vendor evaluation" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">President Approval</label>
                        <input class="form-control" value="Not submitted" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Approval Date</label>
                        <input class="form-control" value="" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="award_remarks">Tender / Award Notes</label>
                        <textarea class="form-control" id="award_remarks" rows="2"
                                  placeholder="Award recommendation will be enabled after evaluation" disabled></textarea>
                    </div>
                </div>
            </div>
        </section>

        <div class="d-flex gap-2 mb-4">
            <button type="submit" class="btn btn-primary">Save Tender Header</button>
            <a href="{% url 'tender_list' %}" class="btn btn-outline-secondary">Cancel / Back</a>
        </div>
    </form>
</div>

<style>
.tender-page { padding-bottom: 24px; }
.tender-panel { background: #dee2e6; border-radius: 7px; padding: 10px; }
.panel-heading { font-size: 18px; font-weight: 600; padding: 8px 14px 12px; color: #17212b; }
.panel-body { background: #fff; border-radius: 4px; padding: 18px; }
.tender-panel .form-label { font-weight: 600; margin-bottom: 5px; }
.tender-panel .table thead th { background: #56636f; color: #fff; white-space: nowrap; }
.tender-panel .table td, .tender-panel .table th { vertical-align: middle; }
</style>

<script>
(function () {
    const select = document.getElementById("pr_id");
    const title = document.getElementById("pr_title");
    const department = document.getElementById("department");
    const requester = document.getElementById("requester");

    function fillFromPR() {
        const option = select.options[select.selectedIndex];
        title.value = select.value ? (option.dataset.title || "") : "";
        department.value = select.value ? (option.dataset.department || "") : "";
        requester.value = select.value ? (option.dataset.requester || "") : "";
    }

    select.addEventListener("change", fillFromPR);
    fillFromPR();
})();
</script>
{% endblock %}